import React, {Component} from 'react';
import {BrowserRouter, Route, Redirect, Switch, HashRouter, NavLink, Link, withRouter} from 'react-router-dom'
import {NavMenu, Layout, Menu} from 'element-react';

// redux
import { createStore } from 'redux';
import  { Provider } from 'react-redux';
import reducer from '../reducer';

import HomePage from "../views/index"
import Test from "../views/test"
import NotFound from "../views/404"
import Music from "../views/music"


const store = createStore(reducer);

class BasicRoute extends Component {
  constructor(props) {
    super(props)
    this.state = {
      menuList: [
        {
          name: "用户",
          link: "/user",
          icon: "el-icon-star-on"
        }, {
          name: "测试页面",
          link: "/test",
          icon: "el-icon-plus"
        },
        {
          name: "音乐列表",
          link: "/music",
          icon: "el-icon-plus"
        },
        {
          name: "错误页面",
          link: "/NotFound",
          icon: "el-icon-plus"
        }
      ]
    }
  }

  componentDidMount() {
    let height = document.documentElement.clientHeight;
    document.getElementsByClassName('el-menu')[0].style.height = height + "px";
    window.onresize = function () {
      let height = document.documentElement.clientHeight + document.documentElement.scrollTop;
      document.getElementsByClassName('el-menu')[0].style.height = height + "px";
    };
    window.onscroll = function () {
      let height = document.documentElement.clientHeight + document.documentElement.scrollTop;
      document.getElementsByClassName('el-menu')[0].style.height = height + "px";
    }
  }

  render() {
    return (
        <div>
          <Provider store = {store}>
            <HashRouter>
              <Layout.Row className="tac">
                <Layout.Col span={6} style={{"marginRight": "20px"}}>
                  <Menu defaultActive="2" className="el-menu-vertical-demo" onOpen={this.onOpen.bind(this)}
                        onClose={this.onClose.bind(this)} theme="dark">
                    {
                      this.state.menuList.map((list, index) => {
                        return <Menu.Item index={index.toString()} key={index}> <i className={list.icon}></i>
                          <NavLink to={list.link} className="blue">{list.name}</NavLink>
                        </Menu.Item>
                      })
                    }
                  </Menu>
                </Layout.Col>
                <Layout.Col span={17} className="Col" style={{"marginTop": "30px"}}>
                  <Switch>
                    <Route path="/user" exact component={HomePage}/>
                    <Route path="/test" exact component={Test}/>
                    <Route path="/music" exact component={Music}/>
                    <Route path="/" exact component={() => (<h1>首页</h1>)}/>
                    <Route component={NotFound}/>
                  </Switch>
                </Layout.Col>
              </Layout.Row>
            </HashRouter>
          </Provider>

        </div>
    )
  }

  onOpen() {

  }

  onClose() {

  }

}


export default BasicRoute;


